<!-- 
	动态组件：供应商列表组件
	props: 
		data: 组件配置数据
		
	action:
		
 -->
<template>
    <view>
        <supplierItem
            v-for="(item, index) in datas"
            :key="index"
            :data="item"
            @goDetail="goDetail"
            :settingData="data" />
        <view class="space-marsk"></view>
        <uni-load-more v-if="isLoading" status="loading"></uni-load-more>
    </view>
</template>

<script>
import { GetSupplierOfferPage } from "@/service/api/supplier.js"
import supplierItem from "@/uni-sub-base/components/dynamic/dynamic-supplier-item.vue"
import { getLocation } from "@/uni-sub-base/utils/mapUtil.js"
import storage from "@/uni-sub-base/utils/storage.js"
export default {
    components: {
        supplierItem,
    },
    props: {
        data: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            datas: [],
            param: {},
            isLoading: false,
            isDataLoadOk: false,
            isoneload: true,
            pageIndex: 1,
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        goDetail(id) {
            let token = storage.getCache("token")
            if (!token || token == "") {
                this.$showModal({ show: true })
                return false
            }
            this.easyGoTo(`/pages_supplier/packet/supplier/detail?id=${id}`)
        },
        listGetMoreData() {
            if (this.data.SupplierShowLoadMore) {
                this.scrolltolower()
            }
        },
        scrolltolower() {
            if (!this.isDataLoadOk) {
                this.GetSupplierOfferPage()
            }
        },
        //加载数据
        getData() {
            this.param = {}
            //TODO 每页多少个需要和下发数据对上
            this.param.pageSize = this.data.SupplierPagesize ? Number(this.data.SupplierPagesize) : 100
            this.param.pageIndex = 1
            switch (this.data.SupplierListLoadtype) {
                case "distance": //距离
                    this.getLocation()
                    break
                case "category": //分类
                    this.param.categoryId = Number(this.data.SupplierCategorySelect)
                    this.GetSupplierOfferPage()
                    break
                case "tag": //标签
                    this.param.tagIds = this.data.SupplierTagSelect.toString()
                    this.GetSupplierOfferPage()
                    break
                case "orderBy": //标签
                    this.param.orderBy = 1
                    this.GetSupplierOfferPage()
                    break
                default:
                    this.GetSupplierOfferPage()
                    break
            }
        },
        //获取当前定位地址
        getLocation() {
            if (storage.getCache("userLocation")) {
                //已经定位过地址
                this.GetSupplierOfferPage()
            } else {
                getLocation(
                    (res) => {
                        if (res) {
                            this.param.lat = res.latitude
                            this.param.lng = res.longitude
                            setTimeout(() => {
                                this.GetSupplierOfferPage()
                            }, 500)
                        }
                    },
                    (error) => {
                        setTimeout(() => {
                            this.GetSupplierOfferPage()
                        }, 500)
                    },
                )
            }
        },
        // 加载数据
        GetSupplierOfferPage() {
            this.isLoading = true
            if (this.isoneload) {
                this.isoneload = false
                GetSupplierOfferPage(this.param).then((res) => {
                    this.isLoading = false
                    if (res.State == 1) {
                        this.datas = this.datas.concat(res.Data)
                        this.isoneload = true
                        if (this.data.SupplierShowLoadMore) {
                            if (this.param.pageIndex >= res.TotalAmout) {
                                this.isDataLoadOk = true
                                this.setLoadBack()
                            } else {
                                this.param.pageIndex += 1
                            }
                        } else {
                            this.isDataLoadOk = true
                            this.setLoadBack()
                        }
                    } else {
                        this.isDataLoadOk = true
                        this.setLoadBack()
                    }
                })
            }
        },
        //组件加载完成
        setLoadBack() {
            this.$emit("loadBack", this.data.index)
        },
    },
}
</script>

<style lang="scss" scope>
@import "@/uni-sub-base/components/dynamic/style/dynamic.scss";

.pro-scroll {
    white-space: nowrap;
    width: 100%;
}

.dynamic-pro-item {
    background: #ffffff;
    margin-bottom: 20rpx;
}

.dynamic-pro-list {
    padding: 24rpx 24rpx 4px;
}

.dynamic-pro-list-scroll {
    padding: 24rpx 0 4px;
}

.dynamic-pro-image-box {
    position: relative;
    width: 600rpx;
    height: 400rpx;

    .dynamic-pro-image {
        width: 100%;
        height: 100%;
    }

    .dynamic-pro-stock {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 66rpx;
        background: rgba(0, 0, 0, 0.4);
        display: flex;
        justify-content: center;
        align-items: center;

        text {
            color: #ffffff;
        }
    }
}

.dynamic-pro-info {
    // padding: $dy-padding-default;
    .dynamic-pro-info-name {
        display: flex;
        padding: $dy-padding-default $dy-padding-default 0;
        margin-bottom: 16rpx;
    }

    .del-text {
        text {
            color: #999999;
        }
    }

    .price-bar {
        display: flex;
        flex-direction: row;
        align-items: center;

        .price-bar-box {
            flex: 1;
        }

        .dynamic-pro-info-price-unit {
            display: inline-block;
            margin-left: $dy-padding-default;
            margin-bottom: $dy-padding-default;
        }

        .price-btn-buy {
            margin-right: $dy-padding-default;
            margin-bottom: $dy-padding-default;
        }
    }
}

.price-btn-buy {
    padding: 8rpx 36rpx;
    background: $app-color-main;
    color: #ffffff;
    border-radius: 80rpx;
}

.dynamic-pro-action-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .dynamic-pro-action-unit {
        flex: 1;
    }
}

.style-1 {
    .dynamic-pro-image-box {
        width: 100%;
    }
}

.style-2 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;

    .dynamic-pro-item {
        width: calc(50% - 10rpx);

        .dynamic-pro-image-box {
            width: 100%;
            height: 100%;
        }

        .dynamic-pro-info-name {
            height: 66rpx;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    }
}

.style-3 {
    display: flex;
    flex-direction: row;

    .dynamic-pro-image-box {
        width: 220rpx;
        height: 220rpx;
    }

    .dynamic-pro-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .dynamic-pro-info-name {
            height: 66rpx;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    }
}

.style-4 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;

    .dynamic-pro-item {
        width: calc(50% - 10rpx);

        &:nth-child(3n + 1) {
            width: 100%;
        }

        .dynamic-pro-image-box {
            width: 100%;
            height: 100%;
        }

        .dynamic-pro-info-name {
            height: 66rpx;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    }
}

.style-5 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;

    &::after {
        content: "";
        width: calc(33% - 12rpx);
    }

    .dynamic-pro-item {
        width: calc(33% - 12rpx);

        .dynamic-pro-image-box {
            width: 100%;
            height: 100%;
        }

        .dynamic-pro-info-name {
            display: block;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
    }
}

.style-6 {
    display: flex;
    flex-direction: row;

    .dynamic-pro-item {
        margin-left: 24rpx;

        .dynamic-pro-image-box {
            width: 200rpx;
            height: 200rpx;
        }

        .dynamic-pro-info {
            width: 200rpx;

            .dynamic-pro-info-name {
                display: block;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
        }
    }
}
.space-marsk {
    height: 1rpx;
    display: flex;
}
</style>
